<template>
	<view class="page" :style="{ '--fss': app.theme.fss() }">
		<common-header title="软件设置" :background="scrollTop > 20 ? '#212121' : 'rgba(0,0,0,0)'"></common-header>
		<view class="myInfo" v-if="info">
			<view class="icon"  @tap="uploadAvatar">
				<image :src="info.user.avatar" mode="aspectFill"></image>
				<text class="ell">更换</text>
			</view>
			<view class="nickname flex" @tap="changeNiack">
				<view class="left ell">{{ info.user.nickname }}</view>
				<view class="right iconfont icon-icons_edit"></view>
			</view>
		</view>
		<view class="edit-list" v-if="info">
			<view class="elist-item flex">
				<view class="eitem-left flex">
					<text class="eitem-left-text">用户ID</text>
				</view>
				<view class="eitem-right flex">
					<text class="e-item-right-desc ell">{{ info.user.id }}</text>
				</view>
			</view>
			<view class="elist-item flex" @tap="changeNiack">
				<view class="eitem-left flex">
					<text class="eitem-left-text">简介</text>
				</view>
				<view class="eitem-right flex">
					<text class="e-item-right-desc ell">我是一个小莫米，从来也不骑，收徒小莫米，从来也不骑，收徒</text>
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex" @tap="toMobile">
				<view class="eitem-left flex">
					<text class="eitem-left-text">手机号码</text>
				</view>
				<view class="eitem-right flex">
					<text class="e-item-right-desc ell">{{ info.user.mobile }}</text>
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex" @tap="thirdPartyBindRef.open()">
				<view class="eitem-left flex">
					<text class="eitem-left-text">第三方绑定</text>
				</view>
				<view class="eitem-right flex">
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex" @tap="app.util.openUrl({ url: '/pages/user/block' })">
				<view class="eitem-left flex">
					<text class="eitem-left-text">用户屏蔽</text>
				</view>
				<view class="eitem-right flex">
					<text class="e-item-right-desc ell">0</text>
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex">
				<view class="eitem-left flex">
					<text class="eitem-left-text">公开自己的歌曲</text>
				</view>
				<view class="eitem-right flex">
					<switch checked style="transform: scale(0.77);margin-right: -10rpx;" color="#00ffbb"></switch>
				</view>
			</view>
		</view>
		<view class="edit-list">
			<view class="elist-item flex" @tap="app.util.openUserPrivacy('user')">
				<view class="eitem-left flex">
					<text class="eitem-left-text">用户协议</text>
				</view>
				<view class="eitem-right flex">
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex" @tap="app.util.openUserPrivacy('privacy')">
				<view class="eitem-left flex">
					<text class="eitem-left-text">隐私协议</text>
				</view>
				<view class="eitem-right flex">
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex" @tap="checkUpdate">
				<view class="eitem-left flex">
					<text class="eitem-left-text" @longpress="showDebug" @tap.stop>软件版本</text>
				</view>
				<view class="eitem-right flex">
					<text class="e-item-right-desc ell">{{ appVersion }}</text>
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<view class="elist-item flex">
				<view class="eitem-left flex">
					<text class="eitem-left-text">软件字体</text>
				</view>
				<view class="eitem-right flex">
					<view class="typeFlex flex">
						<view class="item" :class="app.theme.fss() === item.value ? 'active' : ''" v-for="(item, index) in app.theme.fontSizeDemo" @tap="app.theme.setFss(index)">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="elist-item flex" @tap="logOffRef.open()" v-if="info">
				<view class="eitem-left flex">
					<text class="eitem-left-text">注销账号</text>
				</view>
				<view class="eitem-right flex">
					<text class="eitem-right-text iconfont icon-right-1-copy"></text>
				</view>
			</view>
			<template v-if="app.util.getChannel() === 'oppo'">
				<view class="elist-item flex">
					<view class="eitem-left flex">
						<text class="eitem-left-text">算法名称</text>
					</view>
					<view class="eitem-right flex">
						<text class="e-item-right-desc ell" style="font-size: calc(24rpx * var(--fss));">文心大模型算法</text>
					</view>
				</view>
				<view class="elist-item flex">
					<view class="eitem-left flex">
						<text class="eitem-left-text">算法备案号</text>
					</view>
					<view class="eitem-right flex">
						<text class="e-item-right-desc ell" style="font-size: calc(24rpx * var(--fss));">网信算备110108645502801230035号</text>
					</view>
				</view>
			</template>
		</view>
		<view class="edit-list" v-if="info">
			<view class="elist-item flex" @tap="exit">
				<view class="eitem-left flex">
					<text class="eitem-left-text" style="color:#ff2d2d; opacity: 0.8;">退出账号</text>
				</view>
				<view class="eitem-right flex">
					<text class="eitem-right-text iconfont icon-right-1-copy" style="color:#ff2d2d;opacity: 0.8;"></text>
				</view>
			</view>
		</view>
		<footer-bar></footer-bar>
	</view>
	
	<alert ref="alertRef" />
	<log-off ref="logOffRef" />
	<new-version ref="newVersionRef" />
	<third-party-bind ref="thirdPartyBindRef" :info="info" />
	<common-toast ref="commonToastRef" />
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import { onShow, onPageScroll } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 通用弹窗组件
	const alertRef = ref();
	
	// 注销账号组件
	const logOffRef = ref();
	
	// 更新组件
	const newVersionRef = ref();
	
	// 第三方账号绑定组件
	const thirdPartyBindRef = ref();
	
	// 通用Toast组件
	const commonToastRef = ref();
	
	// 基本信息
	const info = ref(null);
	
	// 当前版本
	const appVersion = ref(app.util.getAppVersion());
	
	// 页面滚动位置
	const scrollTop = ref(0);
	
	
	/* 方法区域 */
	// 显示调试
	function showDebug(){
		uni.showActionSheet({
			title: `当前正在使用的渠道: ${app.util.getChannel()}`,
			itemList: ["修改渠道"],
			success(res){
				if(res.tapIndex === 0){
					alertRef.value.open({
						content: "修改渠道",
						placeholder: "请输入渠道key",
						success(res) {
							if (res.confirm) {
								uni.setStorageSync("channel", res.value);
							}
						}
					});
				}
			}
		});
	}
	
	// 修改头像
	function changeNiack(){
		alertRef.value.open({
			content: "修改我的昵称",
			placeholder: "请输入昵称",
			defaultValue: info.value.user.nickname,
			maxLength: 30,
			success(res) {
				if (res.confirm) {
					commonToastRef.value.open({ type: "loading",text: "修改中.." });
					app.request.ajax({
						url: "/api/user/editUserInfo",
						method: "POST",
						data: { nickname: res.input },
						success(res){
							getData();
							commonToastRef.value.close();
							commonToastRef.value.open({ type: "success", text: "修改成功" });
						},
						error(err){
							commonToastRef.value.close();
							commonToastRef.value.open({ type: "error", text: err.msg });
						}
					});
				}
			}
		});
	}
	
	// 上传头像
	function uploadAvatar() {
		app.util.chooseImageVideo({
			type: "image",
			alert: alertRef.value
		}).then((res) => {
			commonToastRef.value.open({ type: "loading",text: "上传中.." });
			app.request.uploadFile({
				filePath: res[0],
				type: "image",
				success: (res) => { // 上传成功，拿到回调
					commonToastRef.value.open({ type: "loading",text: "修改中.." });
					app.request.ajax({
						url: "/api/user/editUserInfo",
						method: "POST",
						data: { avatar: res.data.file_url },
						success(res){
							getData();
							commonToastRef.value.close();
							commonToastRef.value.open({ type: "success", text: "修改成功" });
						},
						error(err){
							commonToastRef.value.close();
							commonToastRef.value.open({ type: "error", text: err.msg });
						}
					});
				},
				error(err) { // 上传失败
					commonToastRef.value.close();
					commonToastRef.value.open({ type: "error", text: err });
				},
			});
		})
	}
	
	// 跳转到绑定手机号页面
	function toMobile(){
		if(info.value.user.mobile){
			app.util.openUrl({ url: '/pages/user/mobileChange' });
		}else{
			app.util.openUrl({ url: '/pages/user/mobileBind', data: { info: JSON.stringify(app.util.getUserInfo()) } });
		}
	}
	
	// 退出账号
	function exit(){
		let _this = this;
		alertRef.value.open({
			content: "退出账户后无法享受更多权益哦",
			cancelText: "算了",
			confirmText: "仍然退出",
			success(res) {
				if (res.confirm) {
					app.util.loginExit();
					getData();
				}
			}
		});
	}
	
	// 执行更新
	function checkUpdate() {
		newVersionRef.value.open();
	}
	
	// 获取信息
	function getData(){
		info.value = {
			"user": {
				"id": 100006,
				"avatar": "https://api.sora13.com/uploads/image/20240520/f29d995e5d5554b919f288734ab4132b.jpg",
				"nickname": "奥尔马",
				"mobile": null
			},
			"inviter": null,
			"bindWx": {
				"id": 6,
				"platform_name": "wechat",
				"nickname": "MoonSet萤火虫"
			},
			"bindQq": null,
			"bindIos": null
		}
		return;
		
		if(app.util.isLogin()){
			app.request.ajax({
				url: "/api/user/setting",
				success(res){
					info.value = res.data;
				},
			});
		}else{
			info.value = null;
		}
	}
	
	
	// 页面显示
	onShow(() => {
		getData();
	});
	
	// 页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style lang="scss" scoped>
	.page{
		position: relative;
		width: 100%;
		overflow: hidden;
		padding-bottom: $padding;
		&:after{
			position: absolute;
			right: -100rpx;
			top: -100rpx;
			background: url("/static/img/icon_template3_cover.png")no-repeat center right;
			background-size: cover;
			width: 420rpx;
			height: 420rpx;
			content: "";
			opacity: 0.2;
			filter: blur(20rpx);
		}
		.myInfo{
			margin: 45rpx auto 45rpx auto;
			position: relative;
			z-index: 2;
			.icon{
				margin: 0 auto;
				position: relative;
				width: 190rpx;
				height: 190rpx;
				transition: 0.2s all;
				border-radius: 50%;
				border: 8rpx solid rgba(255,255,255,0.08);
				overflow: hidden;
				&:active{
					opacity: 0.8;
				}
				image{
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background: #000;
				}
				text{
					position: absolute;
					color: rgba(255,255,255,0.9);
					background: rgba(0,0,0,0.5);
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					line-height: 1.73;
					font-size: calc(22rpx * var(--fss));
				}
			}
			.nickname{
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				padding: 0 20rpx;
				.left{
					color: rgba(255,255,255,0.9);
					font-size: calc(30rpx * var(--fss));
					line-height: 1.2;
					font-weight: bold;
					max-width: 350rpx;
				}
				.right{
					color: rgba(255,255,255,0.5);
					font-size: calc(24rpx * var(--fss));
					line-height: 1.2;
					margin-left: 18rpx;
				}
			}
		}
		.edit-list {
			position: relative;
			z-index: 2;
			background: rgba(255,255,255,0.06);
			padding: 10rpx 0 10rpx 35rpx;
			margin: 0 $padding 20rpx $padding;
			border-radius: 13rpx;
			.elist-item {
				flex-direction: row;
				justify-content: space-between;
				padding: 8rpx 27rpx;
				padding-left: 0;
				.eitem-left {
					flex-direction: row;
					align-items: center;
					flex-shrink: 0;
					.eitem-left-text {
						line-height: 75rpx;
						font-size: calc(28rpx * var(--fss));
						color: #FFF;
						opacity: 0.7;
					}
				}
				.eitem-right {
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					flex: 1;
					border: 0;
					padding: 0;
					margin: 0;
					padding-left: 50rpx;
					height: 90rpx;
					&:after {
						display: none;
					}
					.typeFlex{
						background: rgba(255,255,255,0.06);
						border-radius: 70rpx;
						flex-direction: row;
						align-items: center;
						padding: 6rpx;
						width: 170rpx;
						margin-right: 8rpx;
						.item{
							width: 0;
							flex: 1;
							line-height: 1.6;
							text-align: center;
							font-size: calc(22rpx * var(--fss));
							color: rgba(255,255,255,0.5);
							&.active{
								font-weight: bold;
								font-size: calc(24rpx * var(--fss));
								color: rgba(255,255,255,0.8);
								border-radius: 70rpx;
								background: rgba(255,255,255,0.08);
							}
						}
					}
					.e-item-right-desc {
						flex: 1;
						max-width: 200rpx;
						text-align: right;
						margin-right: 18rpx;
						font-size: calc(26rpx * var(--fss));
						color: #FFF;
						width: 0;
						opacity: 0.6;
						line-height: 60rpx;
					}
					.eitem-right-text {
						font-size: calc(27rpx * var(--fss));
						color: #FFF;
						opacity: 0.25;
					}
				}
			}
		}
	}
</style>